<template>
  <!-- SearchBar -->
  <div class="selectBarLine">
    <SearchBar @clearArrEvent="reload" :selectTarget="selectOpstion.selectTarget" :isShow="selectOpstion.isShow">
    </SearchBar>
    <span class="huo">或</span>
    <div class="publishBtn">
      <el-button type="primary" color="#03a9f4" @click="handleToPush">发布项目</el-button>
    </div>
  </div>

  <div class="shop">
    <!-- title -->
    <div class="shop-title hyphenOfTitle">
      {{ $route.meta.title }}
    </div>
    <span class="shop-title-underline">-</span>


    <!-- selete navbar -->
    <SeleteNavbar @clearArrEvent="reload" />

    <!-- content -->
    <ShopContent :key="state.timer" />

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, } from "vue"
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/es/components/message/style/css"; // 按需引入ElMessage样式失败，手动引入
import "element-plus/es/components/message-box/style/css";
import SeleteNavbar from "./components/SelectNavbar/index.vue"
import ShopContent from "./components/ShopContent/index.vue"
import SearchBar from "@/components/SearchBar/index.vue"
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 设置搜索框参数
const selectOpstion = {
  selectTarget: '1', // 搜索目标
  isShow: '0', // 是否显示搜索下拉框
}

// 为子组件设置时间戳为key，用于父组件刷新子组件
const state = reactive({
  timer: 0,
})
// 父组件刷新子组件
const reload = () => {
  state.timer = new Date().getTime()
}

// 跳转前进行账户认证确认
const userAuthentication = ref(true);
const handleToPush = () => {
  if (!userAuthentication.value) {
    ElMessageBox.confirm(
      '当前账户未认证，无法发布项目!请前往 “个人中心”-“个人信息”-“账号设置” 进行认证。',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'display',
        type: 'warning',
      }
    )
      .then(() => {
      })
      .catch(() => {
      })
  } else {
    handlePublishRouterPush();
  }
}

// 跳转到项目发布页面
const handlePublishRouterPush = () => {
  router.push({
    name: 'PublishProject',
  })
}

</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.selectBarLine {
  width: 100%;
  background-color: #fff;

  display: flex;

  .search-bar {
    flex: 1;
  }

  span.huo {
    padding-top: 20px;
    display: inline-block;
    width: 64px;
    text-align: center;
    line-height: 50px;
    color: #666;
    font-size: 14px;
  }

  .publishBtn {
    height: 50px;
    width: 150px;
    padding-top: 20px;

    :deep(.el-button) {
      height: 100%;
      width: 100%;
    }
  }
}

.shop {
  margin-top: 30px;
  background-color: #fff;
  border-radius: 10px;
  padding-top: 10px;

  &-title {
    font-size: 25px;
    text-align: center;
  }

  &-title-underline {
    display: block;
    height: 5px;
    line-height: 5px;
    margin: 0 auto;
    color: #ff8a00;
    font-size: 70px;
    text-align: center;
  }

  &-content {
    min-height: 200px;
    margin: 20px 20px 0 20px;
  }
}


// 标题中划线
.hyphenOfTitle::before,
.hyphenOfTitle::after {
  content: "";
  display: inline-block;
  width: 80px;
  border-top: 1px solid #d2d2d3;
  position: relative;
  top: -10px;
}

.hyphenOfTitle::before {
  right: 20px;
}

.hyphenOfTitle::after {
  left: 20px;
}
</style>

<style lang="less">
.display {
  display: none;
}
</style>